<template>
  <div id="userDtl">
    <Navbar navbarText="" />
    <nav class="user_title">
      <van-image round
                 class="image"
                 width="55"
                 height="50"
                 :src="userProfile.avatarUrl" />
      <h2 class="title">{{userProfile.nickname}}</h2>
      <p>
        <span>{{userProfile.follows}} <span style="color:#8E8E8E">关注</span> </span>
        <span style="padding: 0 10px">{{userProfile.followeds}} <span style="color:#8E8E8E">粉丝</span></span>
        <span>Lv{{userData.level}}</span>
      </p>
      <p class="identify">{{userData.identify.imageDesc}}</p>
      <van-button round
                  text="关注"
                  icon="plus"
                  :color="globalObj.normColor" />
    </nav>

  </div>
</template>

<script>
import Navbar from '@/components/navbar'
import { getUserDetalis } from '@/api/userInfo'
export default {
  name: 'userDtl',
  data() {
    return {
      userData: {},
      userProfile: {},
    }
  },
  components: { Navbar },
  methods: {
    initData(id) {
      getUserDetalis(1, '').then((res) => {
        this.userData = res
        this.userProfile = res.profile
      })
    },
  },
  created() {
    this.initData(this.$route.query.id)
  },
}
</script>

<style scoped>
#userDtl {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}
#userDtl /deep/ .van-nav-bar {
  background: #f8f8f8;
}
#userDtl .user_title {
  position: relative;
  width: 90%;
  margin: 30px auto;
  padding: 20px 0 20px 0;
  background: #fff;
  text-align: center;
  border-radius: 15px;
}
#userDtl .user_title .title {
  margin-bottom: 10px;
  font-size: 20px;
}
#userDtl .user_title .image {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}
#userDtl .user_title .identify {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  color: #8e8e8e;
}
#userDtl .user_title .van-button {
  height: 30px;
  width: 30%;
}
</style>